<!--
 * @description: 
 * @Author: FengKongLi
 * @Date: 2022-07-25 15:01:06
 * @LastEditors: FengKongLi
 * @LastEditTime: 2022-08-05 15:00:09
-->
<template>
  <div class="two">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
export default {
  name: "Polygon",
  mounted() {
    this.init();
  },
  methods: {
    init() {
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3NTRlZTllYi0zMjQ3LTRjYzItOGViOS1kYmVjNjAyOTA5ODEiLCJpZCI6OTk0NTAsImlhdCI6MTY1NjQ5NTE4Nn0.BeOLKnxflcj0ztuG4RYdvR8xbXGV7cfEZQWq8Hu7Epw";
      const viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, //是否显示动画控件
        timeline: false, //是否显示时间线控件
        // fullscreenButton: false, //全屏按钮
        // sceneModePicker: false, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        shouldAnimate: true,
        infoBox: false,
      });
      viewer.camera.setView({
        // 目的地
        destination: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 3000),
        // 方向
        orientation: {
          heading: Cesium.Math.toRadians(90.0),
          pitch: Cesium.Math.toRadians(-90),
          roll: 0.0,
        },
      });
      var redBox = viewer.entities.add({
        // 加id方便进行获取该实体
        id: "redBox",
        name: "Red box with black outline",
        // fromDegrees从以度为单位的经度和纬度值返回 Cartesian3 位置。
        position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
        box: {
          // 一个 Cartesian3 属性，用于指定框的长度，宽度和高度。
          dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
          // 用于指定用于填充框的材料。
          // withAlpha()创建具有相同红色，绿色和蓝色成分的新颜色作为此颜色，但具有指定的alpha值。
          material: Cesium.Color.RED.withAlpha(0.5),
          outline: true,
          outlineColor: Cesium.Color.BLACK,
        },
      });

      const redPolygon = viewer.entities.add({
        name: "Red polygon on surface",
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArray([
            116.39, 39.91, 116.39, 39.915, 116.395, 39.91,
          ]),
          material: Cesium.Color.RED,
          // 获取或设置指定多边形挤压高度的数值属性,可拉伸成一个三维几何
          extrudedHeight: 300,
        },
      });

      // property的使用    未实现，问题：添加属性 之后实体会消失
      var property = new Cesium.SampledProperty(Cesium.Cartesian3);

      property.addSample(
        Cesium.JulianDate.fromIso8601("2019-01-01T00:00:00.00Z"),
        new Cesium.Cartesian3(400000.0, 300000.0, 200000.0)
      );

      property.addSample(
        Cesium.JulianDate.fromIso8601("2019-01-03T00:00:00.00Z"),
        new Cesium.Cartesian3(400000.0, 300000.0, 700000.0)
      );

      // redBox.box.dimensions = property;

      // 添加标签实体
      var labelEntity = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 0),
        label: {
          text: "标签实体",
          font: "30px sans-serif",
          fillColor: Cesium.Color.WHITE,
        },
      });

      // 管理空间数据
      // 使用remove(使用名称)方法移除实体
      viewer.entities.remove(labelEntity);
      // 单独对模型属性进行修改  getById()
      viewer.entities.getById("redBox").box.material =
        Cesium.Color.YELLOW.withAlpha(0.5);
    },
  },
};
</script>
<style lang="scss" scoped>
#cesiumContainer {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0px;
  overflow: hidden;
}
</style>
